
import React, { Component } from "react";
import { Carousel, Image, Typography, Divider, Table, Rate, Select, Button, Input, Modal, Descriptions, List, Avatar, Form, InputNumber, Popconfirm  } from 'antd';
import ReactEcharts from 'echarts-for-react';
import echarts from "echarts";
import styles from './scenicSpot.css';
import { ArrowUpOutlined, ArrowDownOutlined, SearchOutlined, RedoOutlined, SkinTwoTone, LikeOutlined, PlusOutlined } from '@ant-design/icons';
import Breadcrumbs from "../../components/component/Breadcrumb/breadcrumb";
import { message } from "antd";
const { TextArea } = Input;
const contentStyle = {
  height: '310px',
  width:830,
  color: '#fff',
  textAlign: 'center',
};
const contents ={
  width:'99%',
  margin:'0 auto'
}
const { Title } = Typography;

const views =[ '西安市大雁塔','西安市钟楼','西安市大唐不夜城','西安市寒窑公园','沣东国际足球公园','西安市玛雅海滩水上公园','西安世园会会址','西咸丝路欢乐世界主体乐园','西安市城市运动公园','西安市植物园','西安市秦始皇兵马俑','西安市秦岭野生动物园','西安市骊山景区'];

const picList =[
  'https://img2.baidu.com/it/u=3187084752,3705422779&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
  'https://img0.baidu.com/it/u=48454045,2637277283&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
  'https://img0.baidu.com/it/u=15096781,1866326418&fm=253&fmt=auto&app=138&f=JPEG?w=865&h=500',
  'https://img2.baidu.com/it/u=4064060719,2026597468&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
  'https://img4.cache.netease.com/photo/0001/2011-05-06/900x600_73DG5BLO00AN0001.jpg',
  'https://p3.itc.cn/q_70/images03/20230317/23250bb3b9d84aecb804f0a598bde922.png',
  'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw%2F57ad26b8-c0ef-4151-9e1d-50184293c879%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1683094167&t=3a6b9fad0a7b32e8b7488d44e40e353e',
  'https://img0.baidu.com/it/u=649429230,1620897859&fm=253&fmt=auto&app=120&f=JPEG?w=771&h=500',
  'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fce003f39-98d0-4d16-9d33-b40db753b211%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1683094289&t=912dc6819cb29a9fe5d39cfcc0314179',
  'https://img2.baidu.com/it/u=2682159586,1574502433&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375',
];


export default class extends Component {
  constructor() {
    super();
    this.state = {
      img1: 'src/assets',
      dataList:[],
      desList:[],
      loading:false,
      recordVisible:false,
      titles:'新增数据',
      analyseVisible:false,
      appraiseVisible:false,
      rows:{},
      addVisible:false,
      columns:[
        { title: '编号', dataIndex: 'code', key: 'code',render:(_,record)=> <a>{record.code}</a> },
        { title: '景区名称', dataIndex: 'name', key: 'name',width:190 },
        { title: '景区ID', dataIndex: 'id', key: 'id', },
        { title: '景区收入额(周同比)', dataIndex: 'income', key: 'income' },  
        { title: '景区出入人数', dataIndex: 'age', key: 'age' },
        { title: '旅游收入同比', dataIndex: 'compared', key: 'compared' },
        { title: '景区评级', dataIndex: 'star', key: 'star',
            render:(_,row)=>{
              return(
                <Rate disabled style={{marginLeft:5}} defaultValue={row.star} />
              )
            }
        },
        { title: '统计时间', dataIndex: 'timer', key: 'timer' },
        { title: '详细地址', dataIndex: 'address', key: 'address' },
        { title: '景区电话', dataIndex: 'phone', key: 'phone' },
        {
          title: '操作',
          dataIndex: '',
          key: 'x',
          render: (_,record) => {
            return(
              <>
                <a onClick={()=>{this.editData(record)}} style={{marginLeft:10}}>修改</a>
                <a onClick={()=>{this.getPicList(record)}} style={{marginLeft:10}}>景区图集</a>
                <a onClick={()=>{this.getDataAnalyse(record)}} style={{marginLeft:10}}>数据分析</a>
                <a onClick={()=>{this.openAppraise(record)}} style={{marginLeft:10}}>景区评价</a>
                <Popconfirm
                  title="确定删除当前数据吗？"
                  onConfirm={this.confirms}
                  okText="确定"
                  cancelText="取消"
                >
                  <a  style={{marginLeft:10,color:'red'}}>删除</a>
                </Popconfirm> 
              </>
            )
          },
        },
      ]
    };
  }

  componentDidMount() {
    this.setState({loading:true},()=>{
      setTimeout(() => {
          this.getDatas();
      }, 1000);
    })
    window.scrollTo(0, 0);
  }

  handleOk = () =>{
    this.setState({recordVisible:false,analyseVisible:false, appraiseVisible:false, addVisible:false},()=>{
        this.reset();
    });
  }

  getPicList = () =>{
    this.setState({recordVisible:true});
  }

  getDataAnalyse = () =>{
    this.setState({analyseVisible:true});
  }

  openAppraise = () =>{
    this.setState({appraiseVisible:true},()=>{
      this.getAppraiseDatas();
    });
  }

  getCookieOption = () =>{
    return {
      color:['#CD9786','#E1C7C0','#AE7681','#C3959F','#C8CDE1','#DAC9BD','#97BFC4'],
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>年龄段 : {b}<br/> 人数 :{c}个,占比 :{d}%"
    },
      series: [
        {
          name: '游客年龄分段占比:',
          type: 'pie',
          radius: ['40%','65%'],
          data: [
            { value: 89, name: '0-10岁' },
            { value: 257, name: '10-20岁' },
            { value: 572, name: '20-30岁' },
            { value: 428, name: '30-40岁' },
            { value: 395, name: '40-50岁' },
            { value: 201, name: '50-60岁' },
            { value: 37, name: '60岁以上' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
  }

  getSexOption = () =>{
    return {
      color:['#f47a75','#22ed7c',],
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>性别 : {b}<br/> 人数 :{c}人,占:{d}%"
    },
      series: [
        {
          name: '游客性别占比:',
          type: 'pie',
          radius: '70%',
          data: [
            { value: 3528, name: '女' },
            { value: 1985, name: '男' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.9)'
            }
          }
        }
      ]
    };
  }

  getTicketOption = () =>{
    return {
      color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
      title:{
        text:'游客购票信息分布图',
        left:'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        }
      },
      // legend: {
      //   orient: 'vertical',
      //   x:'center',      //可设定图例在左、右、居中
      //   y:'top',     //可设定图例在上、下、居中
      //   padding:[0,0,0,30],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
      // },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
      },
      series: [
        {
          name: '景区自购',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [320, 302, 301, 334, 390, 330, 320]
        },
        {
          name: '电话购票',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '网络购票(携程)',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: '网络购票(飞猪)',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [150, 212, 201, 154, 190, 330, 410]
        },
        {
          name: '网络购票(美团)',
          type: 'bar',
          stack: 'total',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [720, 632, 401, 334, 290, 830, 820]
        }
      ]
    };
  }

  getConsumeption = () =>{
    return {
      title:{
        text:'近一个月游客消费趋势图',
        left:'center'
      },
      grid:{
        top:30,
        left:28,
        right:26,
        bottom:18
      },
      color: ["#69b5fb"], 
      xAxis: {
        type: 'category',
        name:'日',
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '11', '12', '13', 
        '14', '15', '16', '17', '18', '19', '20', '21', '22', '23',
        '24', '25', '26', '27','28', '28', '30', '31',
      ],
        axisTick: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#999',
          showMinLabel: true,
          showMaxLabel: true,
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#999'
          }
        },
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        name:'消费记录(千元)',
        splitLine: {
          //网格线
          lineStyle: {
            type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
            width: 1,
            color:"#999"
          },
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer:{
          lineStyle:{
            type:'dashed'
          }
        },
        textStyle: {
          color: '#fff'
        },
        backgroundColor: 'rgba(0,0,0,0.9)',
        confine: true // 超出的部分不会被遮盖
      },
      series: [
        {
          data: [56.3, 53.6, 50.3, 48.8, 46.8, 63.9, 69.3,72.3,78.3,77.6,78.9,81.2,95.6,82.6,86.1,85.1,80.3,79.1,76.3,80.6,70.3,63.3,62.1,62.8, 56.2, 59.6, 59.7, 98, 89, 84.3, 80.2],
          type: 'line',
          showSymbol: false,
          smooth: false,
          lineStyle:{
            color:'#69b5fb'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(105,181,251,0.9)'
            }, {
              offset: 1,
              color: 'rgba(105,181,251,0)'
            }])
          }
        }
      ]
    };
  }

  getAppraiseDatas = () =>{
    let desList = [];
    for (let i = 0; i < Math.floor(Math.random()*1000); i++) {
      desList.push(
        {
          name:`游客${Math.floor(Math.random()*100)}`,
          description: i % 8  == 0 ? '景区很不错,玩得很开心' : i % 8  == 1 ? '收费太贵了,我觉得划不来,价格虚高': i % 8  == 2 ? '景区停车太难了,建议修个停车场' : i % 8  == 3 ? '餐饮味道不错,很地道,回北京带点,好评' :  i % 8  == 4 ? '景点定位不准,找了半天才找到': i % 8  == 4 ? '景区安保做的很好,丢了的手机都找到了，感谢':'景区的休息椅子太少了,走了好久找不到',
          timer: i % 6  == 0 ? '1天前' : i % 6  == 1 ? '3天前': i % 6  == 2 ? '25分钟前' :  i % 6  == 3 ? '3小时前': i % 56  == 4 ? '1小时前':'5天前',
          email:`${Math.floor(Math.random()*100)}eli.sanchez@example${Math.floor(Math.random()*100)}.com`,
          lv: Math.floor(Math.random()* 10) > 5 ? 7 : Math.floor(Math.random()* 10),
          help: i % 3  == 0 ? false : true
        }
      )
    }
    this.setState({desList});
  }

  getDatas = ()=>{
    let datas= [];
    for (let i = 0; i < Math.floor(Math.random()*100); i++) {
      datas.push({
          key: i,
          name: views[Math.floor(Math.random() * 10)],
          code: 'JQ-'+Math.floor(Math.random() * 99999999),
          id: Math.floor(Math.random() * 99999),
          income: Math.floor(Math.random() * 100)+' 万元/周',
          age:  Math.floor(Math.random() * 100)+' 万人/次',
          compared: i%2 == 0 ? <span style={{color:'#3f8600'}}><ArrowUpOutlined style={{color:'#3f8600'}} />{Math.floor(Math.random() * 10)+'%'}</span> : <span style={{color:'#cf1322'}}><ArrowDownOutlined style={{color:'#cf1322'}}/>{Math.floor(Math.random() * 10)+'%'}</span> ,
          address: `西安市高新区锦业路第${Math.floor(Math.random() * 180)}号`,
          description: i%2 == 0 ? '景区人员拥挤，注意踩踏拥堵': '景区人员稀疏,游览通畅',
          star:  i%5 == 0 ?  1 : i,
          grade: Math.floor(Math.random() * 10)+'级',
          ranking: Math.floor(Math.random() * 100),
          rankType: i % 3  == 0 ? '文化景区' : i % 3  == 1 ? '自然景区': '娱乐景区',
          startTime: i % 3  == 0 ? 'AM 09:00' : i % 3  == 1 ? 'AM 09:00': 'AM 08:30',
          endTime: i % 3  == 0 ? 'PM 18:00' : i % 3  == 1 ? 'PM 18:30': 'PM 19:00',
          template: Math.floor(Math.random() * 50) > 32 ? 17 : Math.floor(Math.random() * 50),
          humidity: Math.floor(Math.random() * 50) > 29 ? 15 : Math.floor(Math.random() * 50),
          timer: i % 2 >1 ? '2022-10-08 15:20:30' : '2022-10-26 14:27:11',
          phone: i % 2 >1 ? '02955639' : '02955817'
      });
    }
    this.setState({dataList:datas,loading:false});
  }  

  reset = () =>{
    this.setState({loading:true},()=>{
      setTimeout(() => {
          this.getDatas();
      }, 1000);
    })
  }

  confirms = () =>{
    message.success('数据删除成功!')
    this.reset();
  }

  addData = () =>{
      this.setState({addVisible:true,titles:'新增景区数据'})
  }

  editData = (row) =>{
    this.setState({addVisible:true,rows:row,titles:'修改景区数据'});
}


  render() {
    const { dataList, desList, recordVisible, appraiseVisible, addVisible, columns, loading, analyseVisible, rows, titles } = this.state;
    return (
      <>
        <div style={{marginLeft:0}}>
          <Breadcrumbs props={this.props}></Breadcrumbs>
        </div> 
        <Divider />          
        <div style={{width:'99%',height:'100%',margin:'0 auto'}}>
        <div>
          <div>
            <Title style={{marginLeft:30,textAlign:'left',marginBottom:45}} level={5}>西安市主要景点展示</Title>
          </div>  
          <div style={{margin:'30px 30px'}}>
              <Button type="primary" style={{marginRight:30}} onClick={this.addData} ><PlusOutlined /> 新增数据</Button>
              <span>编号 : </span><Input style={{width:180, marginRight:15}}  allowClear placeholder="输入编号" />
              <span>景区ID : </span><Input style={{width:180, marginRight:15}}  allowClear placeholder="输入景区ID" />
              <span>状态 : </span>
              <Select
                defaultValue=""
                placeholder="选择评级" 
                style={{
                  width: 160,
                  marginRight:15
                }}
                options={[
                  {
                    value: '一颗星',
                    label: '一颗星',
                  },
                  {
                    value: '二颗星',
                    label: '二颗星',
                  },
                  {
                    value: '三颗星',
                    label: '三颗星',
                  },
                  {
                    value: '四颗星',
                    label: '四颗星',
                  },
                  {
                    value: '五颗星',
                    label: '五颗星',
                  },
                ]}
              />
              <Button type="primary" onClick={ this.reset} style={{marginRight:15}} ><SearchOutlined /> 搜索</Button>
              <Button style={{marginRight:15}} onClick={ this.reset} ><RedoOutlined /> 重置</Button>
            </div>        
            <Table
              columns={columns}
              loading={loading}
              size='small'
              expandable={{
                expandedRowRender: record => <p style={{ margin:'10px 30px'}}>
                  <Descriptions title="">
                    <Descriptions.Item label="景区状况">{record.description}</Descriptions.Item>
                    <Descriptions.Item label="国家旅游局评分">{record.grade}</Descriptions.Item>
                    <Descriptions.Item label="全国景区人流量排名">{record.ranking}名</Descriptions.Item>
                    <Descriptions.Item label="景区类型">{record.rankType}</Descriptions.Item>
                    <Descriptions.Item label="景区温度">{record.template}℃</Descriptions.Item>  
                    <Descriptions.Item label="景区相对湿度(RH)">{record.humidity}%</Descriptions.Item>  
                    <Descriptions.Item label="景区开放时间">{record.startTime}</Descriptions.Item>  
                    <Descriptions.Item label="景区关闭时间">{record.endTime}</Descriptions.Item>  
                  </Descriptions>              
                </p>,
                rowExpandable: record => record,
              }}
              pagination={{pageSize:10,showTotal: (total) => `共 ${total}条`}}
              dataSource={dataList}
            />
        </div>
        <Modal title="景区图集" visible={recordVisible} onOk={this.handleOk} width={888} onCancel={()=>{this.setState({recordVisible:false})}}>
          <div style={contents}>
            <Carousel autoplay>
                <div>
                  <h3 style={contentStyle}>
                  <Image
                      preview={true}
                      style={{width:800,height:300}}
                      src={picList[Math.floor(Math.random()*10)]}
                  />                  
                  </h3>
                </div>
                <div>
                  <h3 style={contentStyle}>
                    <Image
                      preview={true}
                      style={{width:800,height:300}}
                      src={picList[Math.floor(Math.random()*10)]}
                    />                   
                  </h3>
                </div>
                <div>
                  <h3 style={contentStyle}>
                    <Image
                      preview={true}
                      style={{width:800,height:300}}
                      src={picList[Math.floor(Math.random()*10)]}
                    />                   
                  </h3>
                </div>   
                <div>
                  <h3 style={contentStyle}>
                    <Image
                      preview={true}
                      style={{width:800,height:300}}
                      src={picList[Math.floor(Math.random()*10)]}
                    />                   
                  </h3>
                </div>  
                <div>
                  <h3 style={contentStyle}>
                    <Image
                      preview={true}
                      style={{width:800,height:300}}
                      src={picList[Math.floor(Math.random()*10)]}
                    />                   
                  </h3>
                </div>                                       
            </Carousel>              
          </div>
        </Modal>  
        <Modal title="景区数据分析" visible={analyseVisible} onOk={this.handleOk} width={1120} onCancel={()=>{this.setState({analyseVisible:false})}}>
          <div className="analyseModal">
             <div style={{border:'1px solid #cecece', textAlign:'center'}}>
                <h3 style={{color:'#ababab'}}>游客年龄占比示意图</h3>
                <ReactEcharts
                      option={this.getCookieOption()} 
                      notMerge={true}
                      lazyUpdate={true}
                      style={{width:510,height:252,margin:5}}
                  />
             </div>
             <div style={{border:'1px solid #cecece', textAlign:'center'}}>
              <h3 style={{color:'#ababab'}}>游客性别占比分析图</h3>
              <ReactEcharts
                    option={this.getSexOption()} 
                    notMerge={true}
                    lazyUpdate={true}
                    style={{width:510,height:252,margin:5}}
                />
             </div>
          </div>
          <div className="analyseModal">
            <div style={{border:'1px solid #cecece', textAlign:'center'}}>
              <ReactEcharts
                    option={this.getTicketOption()} 
                    notMerge={true}
                    lazyUpdate={true}
                    style={{width:510,height:282,margin:5}}
                />
             </div>
             <div style={{border:'1px solid #cecece', textAlign:'center'}}>
              <ReactEcharts
                    option={this.getConsumeption()} 
                    notMerge={true}
                    lazyUpdate={true}
                    style={{width:510,height:282,margin:5}}
                />
             </div>
          </div>
        </Modal>     
        <Modal title="景区评价列表" visible={appraiseVisible} onOk={this.handleOk} width={886} onCancel={()=>{this.setState({appraiseVisible:false})}}>
          <div className="appraiseList">
            <List
              dataSource={desList}
              renderItem={(item) => (
                <List.Item key={item.email}>
                  <List.Item.Meta
                    avatar={<Avatar src={picList[Math.floor(Math.random()*10)]} />}
                    title={<span><span>{item.name}</span> <span style={{color:'#eac90d',marginLeft:8}}><SkinTwoTone twoToneColor="#eac90d" />{item.lv}级</span>  <span style={{color:'#ccc',fontSize:13,marginLeft:25}}>{item.timer}</span></span>}
                    description={item.description}
                  />
                  <div style={{fontSize:14,marginTop:25,marginRight:13}} className={[item.help ? 'help' : 'nohelp']}><LikeOutlined /></div>
                  <div style={{color:'#cdcdcd',fontSize:14,marginTop:25}}><span>发布日期:</span> {2023}-0{Math.floor(Math.random()*10)}-1{Math.floor(Math.random()*10)}</div>
                </List.Item>
              )}
            />
          </div>          
        </Modal>
        <Modal title={titles} visible={addVisible} onOk={this.handleOk} width={566} onCancel={()=>{this.setState({addVisible:false})}}>
            <Form
              name="basic"
              labelCol={{
                span: 4,
              }}
              wrapperCol={{
                span: 20,
              }}
              style={{width:'100%'}}
              initialValues={{
                name: rows == null ? '' : rows.name,
                income: rows == null ? '' : rows.income,
                age: rows == null ? '' : rows.age,
                income: rows == null ? '' : rows.income,
                star: rows == null ? '' : rows.star,
                address: rows == null ? '' : rows.address,
                template: rows == null ? '' : rows.template,
                humidity: rows == null ? '' : rows.humidity,
                ranking: rows == null ? '' : rows.ranking,  
              }}
              onFinish={this.onFinish}
              autoComplete="off"
            >
              <Form.Item
                label="景区名称"
                name="name"
                rules={[
                  {
                    required: true,
                    message: '请输入景区名称!',
                  },
                ]}
              >
                <Input style={{width:350}} placeholder="请输入景区名称" />
              </Form.Item>
              <Form.Item
                label="景区收入"
                name="income"
                rules={[
                  {
                    required: true,
                    message: '请输入景区收入',
                  },
                ]}
              >
                <Input style={{width:200}} placeholder="请输入景区收入" />
              </Form.Item>
              <Form.Item
                label="景区人数"
                name="age"
                rules={[
                  {
                    required: true,
                    message: '请输入景区人数',
                  },
                ]}
              >
                <InputNumber style={{width:200}} placeholder="请输入景区人数" />
              </Form.Item> 
              <Form.Item
                label="收入同比"
                name="income"
                rules={[
                  {
                    required: true,
                    message: '请输入景区收入同比',
                  },
                ]}
              >
                <InputNumber style={{width:200}} placeholder="请输入景区收入同比" />
              </Form.Item>
              <Form.Item
                label="评级"
                name="star"
                rules={[
                  {
                    required: true,
                    message: '请输入景区评级',
                  },
                ]}
              >
                <Rate allowHalf />
              </Form.Item>
              <Form.Item
                label="排名"
                name="ranking"
                rules={[
                  {
                    required: true,
                    message: '请输入景区排名',
                  },
                ]}
              >
                 <InputNumber style={{width:200}} placeholder="请输入景区排名" />
              </Form.Item>   
              <Form.Item
                label="温度"
                name="template"
                rules={[
                  {
                    required: true,
                    message: '请输入景区温度!',
                  },
                ]}
              >
                <Input style={{width:350}} placeholder="请输入景区温度" />
              </Form.Item>
              <Form.Item
                label="湿度"
                name="humidity"
                rules={[
                  {
                    required: true,
                    message: '请输入景区湿度!',
                  },
                ]}
              >
                <Input style={{width:350}} placeholder="请输入景区湿度" />
              </Form.Item>                         
              <Form.Item
                label="地址"
                name="address"
                rules={[
                  {
                    required: true,
                    message: '请输入景区地址',
                  },
                ]}
              >
                <TextArea rows={2} style={{width:350}} placeholder="请输入景区地址"  />
              </Form.Item>                                                              
            </Form>        
        </Modal>                    
      </div>        
      </>

    )
    }
}
